<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>药品保质期检查</title>
    <!--    media="all"：这个CSS在所有页面都可以使用-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/admin/style.css}" media="all">
</head>
<body class="layui-layout-body">
<!--自适应宽度-->
<div class="layui-fluid">
    <!--    每一行的样式-->
    <div class="layui-row layui-col-space15">
        <!--        每一列的样式-->
        <div class="layui-col-md12">
            <!--            卡片元素-->
            <div class="layui-card">
                <div class="layui-card-header">药品保质期检查</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="main-table" lay-filter="main-table"></table>
<!--                    头部工具-->
                    <script type="text/html" id="toolbarDemo">
                        <span class="layui-inline" lay-event="add"><i class="layui-icon">&#xe654;</i></span>
                        <span class="layui-inline" style="width: 240px;">
                            <input class="layui-input" name="param" id="param" placeholder="根据药品名称查询"
                                   autocomplete="off">
                        </span>
                        <span class="layui-btn layui-btn-sm layui-bg-red" lay-event="querySearch">
                            <i class="layui-icon">&#xe615;</i>查询
                        </span>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layui/layui.js}"></script>
<script>
    layui.use(['table', 'form'], function () {
        var $ = layui.$;
        // 加载table
        var table = layui.table;
        // 获取数据
        table.render({
            elem: '#main-table',// 放入数据的位置
            height: 500,
            url: '/druginfo/druginfoQueryPages',// 访问的地址
            method: 'POST',
            page: true,
            id: 'table-load',
            toolbar: '#toolbarDemo',
            // 有哪些列
            cols: [
                [   // type:'numbers'->序号增加
                    {title: '序号', type:'numbers' , width: '5%', align: 'center'}, // 第一列
                    {field: 'name', title: '药品名称', align: 'center'},// 第二列
                    {field: 'warrenty', title: '保质期(月)', align: 'center'},
                    {
                        field: 'producttime',
                        title: '生产时间',
                        align: 'center',
                        templet: "<div>{{layui.util.toDateString(d.producttime,'yyyy-MM-dd')}}</div>"  // 转换时间格式
                    },
                    {
                        field: 'createtime',
                        title: '当前时间',
                        align: 'center',
                        templet: "<div>{{layui.util.toDateString(d.createtime,'yyyy-MM-dd')}}</div>"  // 转换时间格式
                    },
                    {title: '是否过期',align: 'center',templet: isWarranty}
                ]
            ]
        });
        //    监听头工具栏事件
        table.on('toolbar(main-table)', function (obj) {
            switch (obj.event) {
                case 'querySearch':
                    var param = $('#param').val();
                    // 刷新当前tab
                    table.reload('table-load', {
                        where: {
                            param: param
                        }
                    });
                    // 将查询栏里输入的值再刷新回来，也就是查询完，并且刷新数据之后，查询栏里还有原来输入的查询条件
                    $('#param').val(param);
                    break;
            }
        });
        // 计算是否过期函数
        function isWarranty(d){
            debugger
            //先获取到生产日期
            var p_time = d.producttime;
            // 通过-切分  因为格式是yyyy-MM-dd   所有按-切分
            p_time = p_time.split('-');
            // 直接获取到总的月
            p_time = parseInt(p_time[0])*12 + parseInt(p_time[1]);
            // 获取当前时间
            var date = new Date();
            // 获取到当前时间的年
            var year = date.getFullYear();
            // 获取到当前的月
            var month = date.getMonth() + 1;
            var now_year_month = year*12 + month;
            // 计算差值
            var m = now_year_month - (p_time + parseInt(d.warrenty));
            if (m>=1){
                return "<span style='color: red'>已过期" + m +"个月</span>";
            }else if (m==0){
                return "<span style='color: dodgerblue'>保质期不满一个月</span>";
            }else {
                return "<span style='color: forestgreen'>未过期，剩余"+Math.abs(m)+"个月</span>";
            }
        }
    });
</script>
</body>
</html>